<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';

defineOptions({ name: 'PermSearch' });

const activeName = ref(['perm-search']);

interface Emits {
  (e: 'search' | 'reset'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Record<string, any>>('modelValue', {
  default: () => {
    return {
      keywords: '',
      enabled: null,
      parentId: null
    };
  }
});
</script>

<template>
  <ElCollapse v-model="activeName">
    <ElCollapseItem :title="$t('common.search')" name="perm-search">
      <ElForm class="wfull" label-width="80">
        <ElRow :gutter="24">
          <ElCol :lg="6" :md="12" :sm="24">
            <ElFormItem :label="$t('common.keyword')">
              <ElInput v-model="model.keywords" :placeholder="$t('common.keywordSearch')" clearable />
            </ElFormItem>
          </ElCol>
          <ElCol :lg="6" :md="12" :sm="24">
            <ElFormItem :label="$t('form.enabled')">
              <ElSelect v-model="model.enabled" clearable>
                <ElOption :label="$t('form.enabledOptions.enabled')" :value="1"></ElOption>
                <ElOption :label="$t('form.enabledOptions.disabled')" :value="0"></ElOption>
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :lg="12" :md="12" :sm="24">
            <ElFormItem>
              <div class="wfull flex justify-end flex-items-center">
                <ElButton @click="emit('reset')">{{ $t('common.reset') }}</ElButton>
                <ElButton type="primary" @click="emit('search')">{{ $t('common.search') }}</ElButton>
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCollapseItem>
  </ElCollapse>
</template>

<style scoped></style>
